/* Layout Styling */
.layout-container,
.split {
  background: transparent;
}

.layout-container > * {
  margin: 4px;
  box-sizing: border-box;
}

/* all views */
.layout-container .view {
  border: solid 1px transparent;
  transition: all 0.3s;
}

/* preview */
.layout-container > .preview {
  background: rgba(155, 155, 155, 0.4);
  border: dashed 1px #666;
  transition: all 0.3s;
}

/* drag layer */
.layout-container > .drag {
  display: block;
  transform: scale(1) translate(0%, 0%);
  transition: transform 0.3s;
}

.layout-container > .drag.dragging {
  opacity: 0.5;
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.4);
  transform: scale(0.5) translate(0%, 0%);
}

/* Splitter styling */
.split > .splitter {
  flex-basis: 8px;
  position: relative;
  background: transparent;
  transition: all 0.3s;
}

.split.resizeable > .splitter:hover,
.split.resizeable.resizing > .splitter {
  background: rgba(100, 100, 100, 0.4);
  transition: all 0.3s;
}

/* Pane styling */
.pane {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.pane > .header {
  text-transform: uppercase;
  background: #eee;
  color: #444;
}

.pane > .content {
  background: #fefefe;
  padding: 10px;
}
